<template>
  <!-- 搜索 -->
  <div class="search" :class="{ focused: flag }">
    <!-- 搜索框 -->
    <div class="input-wrap" @click="goSearch">
      <input
        @confirm="goList"
        v-model="keyword"
        @input="query"
        type="text"
        :placeholder="placeholder"
      />
      <span class="cancle" @click.stop="onCancel">取消</span>
    </div>
    <!-- 搜索结果 -->
    <div class="content">
      <div class="title">
        搜索历史
        <span @click="removeHistory" class="clear"></span>
      </div>
      <div class="history">
        <navigator
          :key="index"
          v-for="(item, index) in history"
          :url="'/pages/list/index?query=' + item"
        >{{ item }}</navigator>
      </div>
      <!-- 结果 -->
      <scroll-view v-if="list.length" scroll-y class="result">
        <navigator
          :key="item.goods_id"
          v-for="item in list"
          :url="'/pages/goods/index?id=' + item.goods_id"
        >{{ item.goods_name }}</navigator>
      </scroll-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      flag: false, //控制搜索区域的显示与隐藏
      placeholder: "", //占位符
      keyword: "", //用户输入的关键字
      list: [], //搜索建议的列表
      history: uni.getStorageSync("history") || [], //搜索历史
    };
  },
  methods: {
    // 输入框获得焦点
    goSearch() {
      // 获取设备的信息
      const res = wx.getSystemInfoSync();
      this.flag = true;
      this.placeholder = "请输入要查询的关键字";
      // 传入屏幕对应的高度
      this.$emit("SETTALL_EVENT", res.windowHeight);
      // 隐藏tabBar
      uni.hideTabBar();
    },
    // 用户输入时---发送请求
    async query() {
      const { data: res } = await this.http({
        url: "/api/public/v1/goods/qsearch",
        data: {
          query: this.keyword,
        },
      });
      console.log(res);
      this.list = res.message;
    },
    // 回车--跳转列表页
    goList() {
      // 有值时将关键字储存到本地，同时传值跳转
      // 没有值时。则终止
      if (this.keyword) {
        // 添加到历史记录中
        this.history.push(this.keyword);
        // 去除重复单元---es6中简单数据去重
        this.history = [...new Set(this.history)];

        // 存储到本地
        uni.setStorageSync("history", this.history);
        // 调用 API 可以实现页面的跳转--带参数跳转
        uni.navigateTo({
          url: "/pages/list/index?query=" + this.keyword,
        });
      } else {
        return;
      }
      console.log("搜索");
    },
    // 点击取消按钮
    onCancel() {
      this.flag = false;
      this.placeholder = "";
      // 清空输入框
      this.keyword = "";
      // 清空搜索列表
      this.list = [];
      // 传入屏幕的高度为auto
      this.$emit("SETTALL_EVENT", "auto");
      // 显示tabBar
      uni.showTabBar();
    },
    // 删除历史记录
    removeHistory() {
      // 将本地保存的历史删除
      uni.removeStorageSync("history");
      // 将 data 中保存的历史删除
      this.history = [];
    
    },
  },
  created() {},
};
</script>


<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: column;

  // 搜索框
  .input-wrap {
    display: flex;
    height: 100rpx;
    padding: 20rpx 30rpx;
    background-color: #ea4451;
    box-sizing: border-box;
    position: relative;

    &::before,
    &::after {
      height: 44rpx;
      line-height: 1;
      background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
      background-size: 32rpx;
      background-position: 6rpx center;
      background-repeat: no-repeat;

      position: absolute;
      top: 28rpx;
      z-index: 9;
    }

    &::before {
      content: "搜索";
      display: block;

      width: 100rpx;
      padding: 11rpx 0 10rpx 44rpx;
      box-sizing: border-box;
      color: #666;
      font-size: 24rpx;
      left: 325rpx;
    }

    &::after {
      display: none;
      content: "";
      width: 44rpx;
      left: 40rpx;
    }

    input {
      flex: 1;
      height: 60rpx;
      padding: 0 20rpx 0 64rpx;
      background-color: #fff;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #666;
    }

    span.cancle {
      display: none;
      width: 80rpx;
      text-align: right;
      line-height: 60rpx;
      font-size: 27rpx;
      color: #666;
    }
  }

  // 搜索结果
  .content {
    display: none;
    flex: 1;
    padding: 27rpx;
    background-color: #fff;
    position: relative;

    .title {
      font-size: 27rpx;
      line-height: 1;
      color: #333;
    }

    .clear {
      display: block;
      width: 27rpx;
      height: 27rpx;
      float: right;
      background-image: url(http://static.botue.com/ugo/images/clear.png);
      background-size: cover;
    }

    .history {
      padding-top: 30rpx;

      navigator {
        display: inline-block;
        line-height: 1;
        padding: 15rpx 20rpx 12rpx;
        background-color: #ddd;
        font-size: 24rpx;
        margin-right: 20rpx;
        margin-bottom: 15rpx;
        color: #333;
      }
    }

    .result {
      // display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;

      navigator {
        line-height: 1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
        color: #666;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  // 获得焦点状态
  &.focused {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;

    .input-wrap {
      background-color: #eee;

      &::before {
        display: none;
      }

      &::after {
        display: block;
      }
    }

    span.cancle {
      display: block;
    }

    .content {
      display: block;
    }
  }
}
</style>
